<template>
    <div class="wrap container-fluid">
		<nav class="navbar navbar-default head">
		  <div class="container-fluid">
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#">商城后台管理系统</a>
		    </div>
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav navbar-right">
		        <li>访问站点</li>
		      	<li>管理员：郑桂锋</li>
		      	<li>清除缓存</li>
		      	<li>修改密码</li>
		      	<li>安全退出</li>
		      </ul>
		    </div>
		  </div>
		</nav>
		<section class="container-fluid">
			<div class="col-lg-2 left">
				<div class="panel-group" id="accordion">
					<div class="panel panel-default margin">
				        <div class="panel-heading">
				            <h4 class="panel-title"><router-link to="/index">起始页</router-link></h4>
				        </div>
				    </div>
				    <div class="panel panel-default">
				        <div class="panel-heading">
				            <h4 class="panel-title"><a data-toggle="collapse" href="#collapseOne">订单管理</a></h4>
				        </div>
				        <div id="collapseOne" class="panel-collapse collapse in">
				            <div class="panel-body noline"><router-link to="/orderList">订单列表</router-link></div>
				        </div>
				    </div>
				    <div class="panel panel-default">
				        <div class="panel-heading">    
				            <h4 class="panel-title"><a data-toggle="collapse" href="#collapseTwo">商品管理</a></h4>
				        </div>
				        <div id="collapseTwo" class="panel-collapse collapse in">
				            <div class="panel-body noline"><router-link to="/list">商品列表</router-link></div>
				            <div class="panel-body"><router-link to="/recycle">商品回收站</router-link></div>
				        </div>
				    </div>
				    <div class="panel panel-default">
				        <div class="panel-heading">
				            <h4 class="panel-title"><a data-toggle="collapse" href="#collapseThree">会员管理</a></h4>
				        </div>
				        <div id="collapseThree" class="panel-collapse collapse in">
				            <div class="panel-body noline"><router-link to="/vipList">会员列表</router-link></div>
				            <div class="panel-body"><router-link to="/addVip">添加会员</router-link></div>
				            <div class="panel-body"><router-link to="/vipLevel">会员等级</router-link></div>
				            <div class="panel-body"><router-link to="/vipMessage">会员留言</router-link></div>
				        </div>
				    </div>
				</div>
			</div>
			<router-view></router-view>
		</section>
	</div>
	
</template>
<script>
    import bootStrap from "./css/bootstrap.css"
    import animate from "./css/animate.css"
    import style from "./css/style.css"
	import bootJs from "./js/bootstrap"
	import $ from "./js/jquery-3.2.1"
	
    import index from './components/index.vue'
    import list from './components/list.vue'
    import vipLevel from './components/vipLevel.vue'
    export default {
        name:"app",
		data(){
			return{
				selInd:0,
				show:false,
				color:"orange",
				select:"index"
			}
		},
        components:{
            index,
            list,
			vipLevel
        },
		watch:{
			"$route":"update"
		},
		created(){
			let path = this.$route.path.slice(1)
			if(path){
				this.select = path;
			}else{
				this.select = "index";
			}
		},
		methods:{
			update(){
				console.log(1)
				switch(this.$route.path){
					case "/list":
					this.select = "list";
					break;
					case "/":
					this.select = "index";
					break;
					case "/recycle":
					this.select = "recycle";
					break;
					case "/vipList":
					this.select = "vipList";
					break;
					case "/addVip":
					this.select = "addVip";
					break;
					case "/vipLevel":
					this.select = "vipLevel";
					break;
					case "/orderList":
					this.select = "orderList";
					break;
				}
			}
		}
    }
</script>
<style>
	.panel-body{
		display:block;
		width:100%;
		height:100%;
		padding:0!important;
		width:210px;
		height:47px;
		line-height:47px;
		padding-left:15px;
	}
	.panel-body a{
		display:block;
		width:100%;
		height:100%;
		padding-left:15px;
	}
	.margin h4{
		text-indent:0!important;
	}
	.margin h4 a{
		padding-left:5px;
	}
	
</style>